<template>
  <div class="recharge">
    <div class="top">
      <img
        src="../../assets/images/cz1.png"
        alt=""
        class="top-img1"
        @click="goback"
      />
      <p class="top-p">{{$t("common.chongzhi")}} USDT</p>
      <img
        src="../../assets/images/cz2.png"
        alt=""
        class="top-img2"
        @click="gohistory"
      />
    </div>
    <div class="center">
      <img :src="qrcodeImg" alt="" class="center-img" />
      <p class="center-p">{{$t("common.jiuzhichi")}}</p>
    </div>
    <div class="bottom">
      <div class="bottom-a">
        <p>USDT {{$t("common.chongzhidizhi")}}</p>
      </div>
      <div class="bottom-b">
        <p>{{ detail.address || "" }}</p>
        <img
          src="../../assets/images/cz4.png"
          alt=""
          @click="copyLink(detail.address)"
        />
      </div>
      <div class="bottom-c">
        <p>{{$t("common.zhuwang")}}</p>
      </div>
      <div class="bottom-d">
        <van-cell @click="showPopup">
          <p class="p1">{{ this.qz }}</p>
          <p class="p2"><img src="../../assets/images/cz5.png" alt="" /></p>
        </van-cell>
        <van-popup
          v-model="allshow"
          closeable
          position="bottom"
          :style="{ height: '92.8vw' }"
        >
          <div class="popup-a">
            <p>Choose Network</p>
          </div>
          <div
            class="popup-b"
            @click="butqz(true)"
            :class="popupt ? 'popupt' : ''"
          >
            <p>Ethereum(ERC20)</p>
          </div>
          <div
            class="popup-b popup"
            @click="butqz(false)"
            :class="!popupt ? 'popupt' : ''"
          >
            <p>Tron(TRC20)</p>
          </div>
          <van-button type="info" class="popup-button" @click="confirm"
            >{{$t("common.queding")}}</van-button
          >
        </van-popup>
      </div>
      <div class="bottom-e">
        <div class="f1">
          <p class="p1">{{$t("common.zuixiaochongzhi")}}</p>
          <p class="p2">{{ detail.minimumRechargeAmount || "" }} USDT</p>
        </div>
        <div class="f1">
          <p class="p3">{{$t("common.chongzhiqukuai")}}</p>
          <p class="p2">
            {{ detail.confirmationBlockRechargeNumber || "" }} {{$t("common.quekuaiqueren")}}
          </p>
        </div>
        <!-- <div class="f1">
          <p class="p1">提现解锁确认数</p>
          <p class="p2">{{detail.address || ''}} 区块确认</p>
        </div> -->
      </div>
      <!-- <van-button type="info" class="rbutton" @click="tranShow=true">{{$t("common.qianbaochong")}}</van-button> -->
    </div>
    <van-popup
      v-model="tranShow"
      closeable
      position="bottom"
      :style="{ height: '74.4vw' }"
      class="popup"
    >
      <div class="title">{{$t("common.chongzhi")}}</div>
      <p class="p2">{{$t("common.shuliang")}}(USDT)</p>
      <div class="new">
        <input v-model="amount" type="number" :placeholder="$t('common.shurushuliang')"  @input="amount=$formatDecimal(amount,2)"/>
      </div>
      <van-button type="info" class="submit" @click="tranSubmit">{{$t("common.chongzhi")}}</van-button>
    </van-popup>
  </div>
</template>
<script>
import QRCode from "qrcode";
import { mapGetters } from "vuex";
import {Toast} from 'vant'
// import { transact } from "../../common/connectWallet";
export default {
  computed: {
    ...mapGetters(["getUserInfo"]),
  },
  data() {
    return {
      amount:'',
      tranShow: false,
      userInfo: {},
      qrcodeImg: "",
      detail: {},
      chainList: [],
      popupt: true,
      qz: "Tron(TRC20)",
      allshow: false,
      // shurushuliang: this.$t('common.shurushuliang'),
      // fuzhicheng: this.$t('common.fuzhicheng'),
      // fuzhishi: this.$t('common.fuzhishi'),
      // qingshurushu: this.$t('common.qingshurushu'),
      // shaoyuzui: this.$t('common.shaoyuzui'),
      // qingqiuqian: this.$t('common.qianbaoqing'),
      // chongzhicheng: this.$t('common.chongzhicheng'),

    };
  },
  async created() {
    this.userInfo = this.getUserInfo;
    this.chainList = await this.$getDict("public_chain");
    if (this.userInfo.chain == "trx") {
      this.qz = "Ethereum(ERC20)";
      this.popupt = true;
    } else{
      this.qz = "Tron(TRC20)";
      this.popupt = false;
    }
    this.getInfo();
  },
  methods: {
    async tranSubmit(){
      // if(!this.amount || this.amount == '0'){
      //   this.$toast(this.$t('common.qingshurushu'));
      //   return
      // }
      // if(+this.amount < this.detail.minimumRechargeAmount){
      //   this.$toast(this.$t('common.shaoyuzui'));
      //   return
      // }
      // Toast.loading({
      //   message: this.$t('common.qianbaoqing'),
      //   duration: 5000
      // });
      // const tx = await transact({
      //     toAddress: this.detail.address,
      //     amount: this.amount.toString(),
      //     publicChain : this.userInfo.chain == 'eth' ? '1' : '2'
      // })
      // const ret = await tx.wait(1);
      // this.$toast(this.$t('common.chongzhicheng'));
      // Toast.clear()
      // this.tranShow = false
    },
    async getInfo() {
      const ret = await this.$http({
        url: "/wallet/currency/rechargePage",
        method: "post",
        data: {
          mainNetwork: this.popupt
            ? this.chainList[0].value
            : this.chainList[1].value,
        },
      });
      if (ret.data.code === 0) {
        this.detail = ret.data.data;
        this.createQRCode(); 
      }
    },
    createQRCode() {
      QRCode.toDataURL(this.detail.address, {
        //这个this.url就是你扫码后要跳转的地址
        version: 7, //版本号
        errorCorrectionLevel: "Q", //容错率,(建议选较低)更高的级别可以识别更模糊的二维码，但会降低二维码的容量
        width: 280, //设置二维码图片大小
        height: 280,
      })
        .then((url) => {
          // console.log(url); //这个url是二维码生成地址，也就是相当于图片地址
          this.qrcodeImg = url; //赋值给变量。用在img的src属性上
        })
        .catch((err) => {
          console.error(err);
        });
    },
    goback() {
      this.$router.go("-1");
    },
    gohistory() {
      localStorage.setItem("ls", 0);
      this.$router.push("/history");
    },
    showPopup() {
      this.allshow = true;
      if (this.qz === "Ethereum(ERC20)") {
        this.popupt = true;
      } else if (this.qz === "Tron(TRC20)") {
        this.popupt = false;
      }
    },
    butqz(val) {
      this.popupt = val;
    },
    confirm() {
      this.allshow = false;
      if (this.popupt === true) {
        this.qz = "Ethereum(ERC20)";
      } else if (this.popupt === false) {
        this.qz = "Tron(TRC20)";
      }
      this.getInfo();
    },
    copyLink(val) {
      // 复制链接  val 就是你需要复制的链接
      this.$copyText(val).then(
        () => {
          this.$toast(this.$t('common.fuzhicheng'));
        },
        () => {
          this.$toast(this.$t('common.fuzhishi'));
        }
      );
    },
  },
};
</script>
<style scoped lang="scss">
.recharge {
  margin: 0;
  padding: 0;
  .top {
    height: 11.73vw;
    width: 100vw;
    background-color: #090A1B;
    display: flex;
    justify-content: space-between;
    align-items: center;
    //font-family: Microsoft Yahei;
    .top-img1 {
      height: 5.3vw;
      width: 5.3vw;
      margin-left: 2.4vw;
    }
    .top-p {
      font-size: 4.8vw;
      color: rgba(255, 255, 255, 100);
    }
    .top-img2 {
      height: 5.3vw;
      width: 5.3vw;
      margin-right: 3.2vw;
    }
  }
  .center {
    height: 81.3vw;
    background-color: #090A1B;
    .center-img {
      height: 53.3vw;
      width: 53.3vw;
      position: relative;
      top: 12vw;
      right: 0.26vw;
    }
    .center-p {
      position: relative;
      bottom: -16.4vw;
      color: rgba(214, 214, 214, 100);
      font-size: 3.73vw;
      font-family: PingFangSC-regular;
    }
  }
  .bottom {
    height: 123.46vw;
    background-color: #090A1B;
    .bottom-a {
      height: 12.26vw;
      background-color: #090A1B;
      p {
        color: rgba(135, 139, 151, 100);
        font-size: 3.2vw;
        position: relative;
        top: 5.86vw;
        float: left;
        left: 3.46vw;
        font-family: PingFangSC-regular;
      }
    }
    .bottom-b {
      width: 93.33vw;
      height: 13.33vw;
      border-radius: 0.53vw;
      line-height: 5.3vw;
      text-align: center;
      left: 3.46vw;
      margin-left: 3.46vw;
      background-color: rgba(45, 47, 59, 100);
      p {
        width: 76.53vw;
        height: 9.6vw;
        color: rgba(214, 214, 214, 100);
        font-size: 3.73vw;
        text-align: left;
        font-family: PingFangSC-regular;
        background-color: rgba(45, 47, 59, 100);
        position: relative;
        top: 1.86vw;
        left: 2.66vw;
        word-wrap: break-word;
        word-break: normal;
        font-weight: 600;
      }
      img {
        position: relative;
        bottom: 4.86vw;
        left: 40.8vw;
        height: 4.8vw;
        width: 4.8vw;
      }
    }
    .bottom-c {
      height: 10.13vw;
      p {
        color: rgba(135, 139, 151, 100);
        font-size: 3.2vw;
        text-align: left;
        font-family: PingFangSC-regular;
        position: relative;
        top: 3.73vw;
        left: 3.46vw;
      }
    }
    .bottom-d {
      height: 9.6vw;
      width: 93.33vw;
      line-height: 5.33vw;
      text-align: center;
      margin-left: 3.46vw;
      border-radius: 0.53vw;
      background-color: rgba(45, 47, 59, 100);
      color: rgba(16, 16, 16, 100);
      font-size: 3.73vw;
      .p1 {
        width: 34.2vw;
        height: 5.33vw;
        color: rgba(214, 214, 214, 100);
        font-size: 3.73vw;
        text-align: left;
        font-family: PingFangSC-regular;
        position: relative;
        top: 2.13vw;
        left: 2.66vw;
        font-weight: 600;
      }
      .p2 {
        width: 4.8vw;
        height: 4.8vw;
        line-height: 5.33vw;
        border-radius: 0.53vw;
        background-color: rgba(79, 82, 93, 100);
        text-align: center;
        position: relative;
        left: 85.86vw;
        bottom: 2.8vw;
        img {
          width: 3.2vw;
          height: 3.2vw;
        }
      }
    }
    .bottom-e {
      width: 93.33vw;
      // height: 25.6vw;
      line-height: 5.33vw;
      border-radius: 0.53vw;
      background-color: rgba(45, 47, 59, 100);
      margin-left: 3.46vw;
      margin-top: 5.33vw;
      .f1 {
        height: 12vw;
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 3.2vw;
        font-family: PingFangSC-regular;
        .p1 {
          height: 5vw;
          margin-left: 2.66vw;
          color: rgba(135, 139, 151, 100);

        }
        .p2 {
          margin-right: 2.66vw;
          color: rgba(214, 214, 214, 100);
          font-weight: 600;
        }
        .p3{
          width: 30vw;
          display: flex;
          align-items: center;
          text-align: left;
          height: 8vw;
          line-height: 4vw;
          margin-left: 2.66vw;
          color: rgba(135, 139, 151, 100);

        }
      }
    }
    .van-cell {
      padding: 0;
      height: 9.6vw;
      background-color: rgba(45, 47, 59, 100);
      line-height: 5.33vw;
    }
    .van-cell::after {
      border-bottom: 0;
    }
    .van-popup {
      border-radius: 2.6vw 2.6vw 0 0;
      background-color: #090A1B;
    }
    ::v-deep .van-popup__close-icon {
      font-size: 5.33vw;
      color: rgba(135, 139, 151, 100);
    }
    .popup-a {
      height: 17.6vw;
      p {
        width: 35vw;
        height: 5.86vw;
        color: rgba(255, 255, 255, 100);
        font-size: 3.73vw;
        text-align: left;
        font-family: PingFangSC-regular;
        position: relative;
        top: 5.33vw;
        left: 33.33vw;
        letter-spacing: 0.32vw;
      }
    }
    .popup-b {
      width: 91.46vw;
      height: 17.33vw;
      line-height: 5.33vw;
      border-radius: 1vw;
      background-color: rgba(45, 47, 59, 100);
      text-align: center;
      margin-left: 4.26vw;
      p {
        width: 38.66vw;
        height: 5.86vw;
        color: rgba(255, 255, 255, 100);
        font-size: 3.73vw;
        text-align: left;
        font-family: PingFangSC-regular;
        position: relative;
        top: 5.86vw;
        left: 4.26vw;
        letter-spacing: 0.32vw;
      }
    }
    .popup {
      margin-top: 4.26vw;
    }
    .popupt {
      background-color: #090A1B;
      border: 0.53vw solid rgba(10, 122, 255, 100);
    }
    .popup-button {
      margin-top: 10.66vw;
      width: 91.46vw;
      height: 9.86vw;
      line-height: 5.3vw;
      border-radius: 0.8vw;
      background-color: rgba(10, 122, 255, 100);
      color: rgba(255, 255, 255, 100);
      font-size: 3.73vw;
      text-align: center;
     //font-family: Arial;
    }
  }
}
.popup {
    border-radius: 2.66vw 2.66vw 0px 0px;
    background-color: #090A1B;
    .title {
      width: 50.46vw;
      height: 6.13vw;
      color: rgba(255, 255, 255, 100);
      font-size: 4.26vw;
      font-family: PingFangSC-regular;
      margin: 0 auto;
      position: relative;
      top: 6.4vw;
      letter-spacing: 0.2vw;
    }
    .p2 {
      // width: 10.13vw;
      height: 4.53vw;
      color: rgba(255, 255, 255, 100);
      font-size: 3.2vw;
      font-family: PingFangSC-regular;
      position: relative;
      text-align: left;
      margin-left:5vw;
      top: 17.06vw;
      left: 0vw;
      letter-spacing: 0.1vw;
    }
    .new {
      width: 93.06vw;
      height: 10.13vw;
      line-height: 5.33vw;
      border-radius: 0.8vw;
      background-color: #090A1B;
     //font-family: Arial;
      border: 1px solid rgba(135, 139, 151, 100);
      position: relative;
      top: 19.73vw;
      left: 3.46vw;
      display: flex;
      align-items: center;
      input {
        width: 85.33vw;
        color: #fff;
        font-size: 3.73vw;
        height: 6.66vw;
        position: relative;
        left: 2.4vw;
        background-color: #090A1B;
        border-width: 0;
        font-weight: 600;

      }
      input::-webkit-input-placeholder {
        color: rgba(79, 82, 93, 100);
        font-weight: 500;
      }
    }
    .submit {
      width: 93.33vw;
      height: 10.66vw;
      line-height: 5.33vw;
      border-radius: 1.33vw;
      background-color: rgba(10, 122, 255, 100);
      color: rgba(255, 255, 255, 100);
      font-size: 3.73vw;
      text-align: center;
     //font-family: Arial;
      margin-top:30vw;
    }
  }

  .rbutton {
    width: 93.33vw;
    height: 10.66vw;
    line-height: 5.33vw;
    border-radius: 1.33vw;
    background-color: rgba(10, 122, 255, 100);
    color: rgba(255, 255, 255, 100);
    font-size: 3.73vw;
    text-align: center;
   //font-family: Arial;
    margin-top:10vw;
  }
</style>